import React, { Component } from 'react';
import { Swiper, List } from 'antd-mobile'
import { getBanners, getList } from '../../../api'
class Index extends Component {
	state = {
		banners: [],
		list: []
	}
	async getBanners() {
		const resp = await getBanners()
		const { data } = resp.data
		this.setState({ banners: data })
	}
	async getList() {
		const resp = await getList()
		const { data } = resp.data
		this.setState({ list: data })
	}
	componentDidMount() {
		this.getBanners()
		this.getList()
	}
	render() {
		const { banners, list } = this.state
		return (
			<div>
				{/* 轮播 */}
				<Swiper>
					{
						banners.length > 0 && banners.map((v, i) => {
							return (
								<Swiper.Item key={i}>
									<img src={v} alt="" />
								</Swiper.Item>
							)
						})
					}
				</Swiper>
				{/* 列表 */}
				<List>
					{
						list.length > 0 && list.map(v => {
							return (
								<List.Item 
									key={v.id}
									prefix={ <img src={ v.url }></img> }
									description={ v.desc }
									onClick={ () => this.props.history.push({
										pathname: `/detail/${v.id}`,
										state: v
									}) }
								>
										{v.title}
								</List.Item>
							)
						})
					}
				</List>
			</div>
		);
	}
}

export default Index;
